<template>
      <div>
        <div style="background-color:white;">
          <q-tabs
            v-model="tab"
            dense
            class="text-grey-9"
            inline-label
            align="left">
            <q-tab name="tab-1">基本信息</q-tab>
            <q-tab name="tab-2">联系人信息</q-tab>
            <q-tab name="tab-3">会计</q-tab>
            <q-tab name="tab-4">职位</q-tab>
            <q-tab name="tab-5">资质</q-tab>
            <q-tab name="tab-6">相关附件</q-tab>
          </q-tabs>
          <q-tab-panels v-model="tab" animated>
            <q-tab-panel name="tab-1">
              <div class="row q-col-gutter-sm">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div :class="$v.addOrEditForm.code.$error?'text-negative': ''">编码</div>
                    <q-input
                    v-model="addOrEditForm.code"
                    error-message="该字段为必填项"
                    :error="$v.addOrEditForm.code.$error"
                    @blur="$v.addOrEditForm.code.$touch"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">名称</div>
                    <q-input
                    v-model="addOrEditForm.name"
                    error-message="该字段为必填项"
                    :error="$v.addOrEditForm.name.$error"
                    @blur="$v.addOrEditForm.name.$touch"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>英文名称</div>
                    <q-input
                    v-model="addOrEditForm.nameEn"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <category-tree v-on:cate="categoryes" class="text-purple cursor-pointer"></category-tree>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <select-tree v-on:unsp="unspsc" class="text-purple cursor-pointer"></select-tree>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>是否接受出差</div>
                  <q-select
                  :options="typeOption"
                  v-model="addOrEditForm.isAccpBusTrip"
                  emit-value
                  map-options
                  dense></q-select>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>是否公开</div>
                  <q-select
                  :options="typeOption"
                  v-model="addOrEditForm.isPublic"
                  emit-value
                  map-options
                  dense></q-select>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>是否为内部员工</div>
                  <q-select
                  :options="typeOption"
                  v-model="addOrEditForm.isEmp"
                  emit-value
                  map-options
                  dense></q-select>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <div>说明</div>
                    <q-input
                    type="textarea"
                    v-model="addOrEditForm.remark"
                    dense hint/>
                  </div>
                </div>
              <q-btn dense color="light-blue" :label="$t('保存并继续')"/>
            </q-tab-panel>
            <q-tab-panel name="tab-2">
              <div class="row q-col-gutter-sm">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>地址(1)</div>
                    <q-input
                    v-model="contactsForm.address1"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>地址(2)</div>
                    <q-input
                    v-model="contactsForm.address2"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>国家</div>
                    <q-input
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>省</div>
                    <q-input
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>市</div>
                    <q-input
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>电话</div>
                    <q-input
                    v-model="contactsForm.telephone"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>邮件</div>
                    <q-input
                    v-model="contactsForm.eMail"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>传真</div>
                    <q-input
                    v-model="contactsForm.fax"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>个人网站</div>
                    <q-input
                    v-model="contactsForm.webSite"
                    dense hint/>
                  </div>
                </div>
            </q-tab-panel>
            <q-tab-panel name="tab-3">
              <div class="row q-col-gutter-sm">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>结算币种</div>
                    <q-input
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>工资标准</div>
                    <q-input
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>结算费率</div>
                    <q-input
                    dense hint/>
                  </div>
              </div>
            </q-tab-panel>
          </q-tab-panels>
       </div>
      </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
import CategoryTree from 'pages/Mdm/Job/JobMain/CategoryTree.vue'
import SelectTree from 'pages/Mdm/Job/JobMain/SelectTree.vue'
export default {
  name: 'addlabor',
  components: {
    CategoryTree,
    SelectTree
  },
  data () {
    return {
      tab: 'tab-1',
      addOrEditForm: {
        code: '',
        name: '',
        nameEn: '',
        isAccpBusTrip: 0,
        isPublic: 1,
        isEmp: 1,
        remark: ''
      },
      contactsForm: {
        address1: '',
        address2: '',
        telephone: '',
        eMail: '',
        fax: '',
        webSite: ''
      },
      typeOption: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ]
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      code: { required }
    }
  },
  created () {
    console.log(this.$route.params.addEdit)
  },
  methods: {
    // 获取选择品类
    categoryes (data) {
      console.log(data)
    },
    // 获取选择unspsc
    unspsc (data) {
      console.log(data)
    }
  }
}
</script>

<style>

</style>
